<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
    <link rel="stylesheet" href="lib/styles/iview.css">    
    <script src="lib/zepto.min.js"></script>
    <style type="text/css">
       
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
    }
    .layout-logo{
        width: 100px;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 15px;
        left: 20px;
    }
    .layout-nav{
        width: 420px;
        margin: 0 auto;
    }
    .layout-assistant{
        width: 300px;
        margin: 0 auto;
        height: inherit;
    }
    .layout-breadcrumb{
        padding: 10px 15px 0;
    }
    .layout-content{
        min-height: 200px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }
    .layout-content-main{
        padding: 10px;
    }
    .layout-copy{
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }

    </style>
</head>
<body>
    <div id="app"></div>
    <script src="lib/vue.js"></script>
    <script src="lib/iview.js"></script>
    <script src="lib/locale/zh-CN.js"></script>
    <script src="lib/vue-router.min.js"></script>    
    <myPage html="pages/index.html"></myPage>
    <myPage html="pages/page1.html"></myPage>
    <myPage html="pages/page2.html"></myPage>
    <template id="main">
            <div class="layout">
                    <i-menu mode="horizontal" theme="dark" active-name="1">
                        <a href="#/"><div class="layout-logo"></div></a>
                        <div class="layout-nav">
                            <i-menu-item name="1">
                                <a href="#/page1">
                                <i-icon type="ios-navigate"></i-icon>
                                Page1</a>
                            </i-menu-item>
                            <i-menu-item name="2">
                                <a href="#/page2">
                                <i-icon type="ios-keypad"></i-icon>
                                Page2
                                </a>
                            </i-menu-item>
                            <i-menu-item name="3">
                                <i-icon type="ios-analytics"></i-icon>
                                Item 3
                            </i-menu-item>
                            <i-menu-item name="4">
                                <i-icon type="ios-paper"></i-icon>
                                Item 4
                            </i-menu-item>
                        </div>
                    </i-menu> 
                    <i-menu mode="horizontal" active-name="1">
                        <div class="layout-assistant">
                            <i-menu-item name="1">Option 1</i-menu-item>
                            <i-menu-item name="2">Option 2</i-menu-item>
                            <i-menu-item name="3">Option 3</i-menu-item>
                        </div>
                    </i-menu>
                    <div class="layout-content">
                        <i-row>
                            <i-col span="5">
                                <i-menu active-name="1-2" width="auto" :open-names="['1']">
                                    <i-submenu name="1">
                                        <template slot="title">
                                            <i-icon type="ios-navigate"></i-icon>
                                            Item 1
                                        </template>
                                        <i-menu-item name="1-1">Option 1</i-menu-item>
                                        <i-menu-item  name="1-2">Option 2</i-menu-item>
                                        <i-menu-item  name="1-3">Option 3</i-menu-item >
                                    </i-submenu>
                                    <i-submenu name="2">
                                        <template slot="title">
                                            <Icon type="ios-keypad"></Icon>
                                            Item 2
                                        </template>
                                        <i-menu-item  name="2-1">Option 1</i-menu-item >
                                        <i-menu-item  name="2-2">Option 2</i-menu-item >
                                    </i-submenu>
                                    <i-submenu name="3">
                                        <template slot="title">
                                            <Icon type="ios-analytics"></Icon>
                                            Item 3
                                        </template>
                                        <i-menu-item  name="3-1">Option 1</i-menu-item >
                                        <i-menu-item  name="3-2">Option 2</i-menu-item >
                                    </i-submenu>
                                </i-menu>
                            </i-col>
                            <i-col span="19">
                                <div class="layout-content-main"><router-view></router-view></div>
                            </i-col>
                        </i-row>
                    </div>
                    <div class="layout-copy">
                        2011-2016 &copy; TalkingData
                    </div>
            </div>

            
    </template>
    <script>

        function loadMyPage(){
            var pages=$("myPage");
            for(var i=0;i<pages.length;i++){
                var page=pages[i];
                var html=$(page).attr("html");
                var js=$(page).attr("js");
                var code="";
                if(html){
                    code=$.ajax({url:html+"?x="+ +new Date(),async:false}).responseText;
                    if(code.indexOf("<script>")>0){
                        var st=code.toLowerCase().indexOf("<script>");
                        var ed=code.toLowerCase().lastIndexOf("script>");
                        var sc=code.substring(st+8,ed-2);                        
                        code=code.substring(0,st);
                        page.outerHTML=code;
                        eval(sc);
                    }

                }else{
                    page.outerHTML=code;
                }
                if(js){
                    code=$.ajax({url:js,async:false}).responseText;
                    eval(code);
                }
            }

            var  router = new VueRouter({
            routes: [
                    {path: '/', name: 'index', component: Index}
                    ,{path: '/page1', name: 'page1', component: Page1}
                    ,{path: '/page2', name: 'page2', component: Page2}
           ]});

           var app = new Vue({
                router: router,
                render: function(v){
                    return v(Vue.extend({
                            template:"#main"
                    }));
                }
            }).$mount('#app');

        }
        $(function(){
            loadMyPage();
        });

    </script>
</body>
</html>